<template>
  <div class="table-classic-wrapper">
    <el-card class="card_box">

      <!--顶部返回框-->
      <el-page-header @back="goBack" :content="commodityName" style="margin-bottom: 30px"></el-page-header>

      <el-card class="card_show" body-style="padding:30px">
        <vue-seamless-scroll :data="commentList" class="seamless-warp" :class-option="classOption">

          <div v-for="i in commentList" :key="i">
            <el-card class="card_content" shadow="hover">

              <el-row>
                <el-col :span="6">
                  <span style="font-weight: bolder;font-size: 25px">用&ensp;&ensp;户:</span>
                </el-col>
                <el-col :span="6">
                  <el-tag>{{i.userName}}</el-tag>
                </el-col>
              </el-row>

              <el-row style="margin-top: 10px">
                <el-col :span="6" >
                  <span style="font-weight: bolder;font-size: 20px">针对餐厅的服务评价:&ensp;</span>
                </el-col>
                <el-col :span="6" style="margin-top: 5px">
                  <el-rate
                      v-model="i.appraiseService"
                      disabled
                      show-score
                      text-color="#ff9900">
                  </el-rate>
                </el-col>
              </el-row>

              <el-row style="margin-top: 10px">
                <el-col :span="6">
                  <span style="font-weight: bolder;font-size: 20px">针对美食的评价:&ensp;</span>
                </el-col>
                <el-col :span="18">
                  <span style="font-size: 18px">{{i.appraiseInformation}}</span>
                </el-col>
              </el-row>


            </el-card>
          </div>
        </vue-seamless-scroll>

      </el-card>

    </el-card>
  </div>
</template>

<script>

import vueSeamlessScroll from 'vue-seamless-scroll'
import {selectInformationByCommodityId} from "@/api/merchant/commodity/comment";

export default {

  name: "CommodityCommentsList",
  props:["commodityId","commodityName"],

  components: {
    vueSeamlessScroll
  },

  data() {
    return {

      count: 0,

      /**
       * 评论列表
       */
      commentList:[],
    }
  },

  created() {
    this.getCommentList();
  },

  // 监听属性 类似于data概念
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },

  methods: {

    /**
     * 获得评论列表
     */
    getCommentList() {
      const formData=new FormData();

      formData.append("commodityId", this.commodityId);

      selectInformationByCommodityId(formData).then(res=>{
        this.commentList=res.information;
      })

    },

    /**
     *返回商品评论页面
     */
    goBack() {
      this.$router.push('/index/commodityComments')
    },
  }
}
</script>

<style scoped>
.card_box {
  height: 82vh;
}

.seamless-warp {
  width: 100%;
  height: 630px;
  overflow: hidden;
}

.card_show {
  margin: 0 auto;
  width: 1050px;
  height: 650px;
  text-align: center;
}

.card_content {
  width: 99%;
  height: 200px;
  margin-bottom: 10px;
  text-align: left;
}
</style>
